/**
* Created by wust on 2019/5/23.
*/
<template>
  <div>
    <el-tabs>
      <el-tab-pane label="我的导入导出">
        <my-import-export-search-bar v-on:search="search"></my-import-export-search-bar>
        <el-button-group style="margin-bottom: 7px;float: left;">
          <el-button size="mini" type="primary" @click="showLog" v-has-permission="'MyImportExportList.download'" icon="el-icon-view">查看日志</el-button>
          <el-button size="mini" type="primary" @click="downloadExcel" v-has-permission="'MyImportExportList.download'"
            icon="el-icon-download">下载文件</el-button>
        </el-button-group>
        <el-table border v-loading="loading" size="mini" :data="baseDto.lstDto" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="batchNo" label="编码" width="120">
          </el-table-column>
          <el-table-column prop="moduleName" label="模块名" width="180">
          </el-table-column>
          <el-table-column prop="operationTypeLabel" label="操作类型" width="100">
          </el-table-column>
          <el-table-column prop="statusLabel" label="状态" width="100">
          </el-table-column>
          <el-table-column prop="description" label="备注" width="180">
          </el-table-column>
          <el-table-column prop="createrName" label="创建人" width="150">
          </el-table-column>
          <el-table-column label="开始时间时间" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.startTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.endTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="pageSizeChange" @current-change="pageIndexChange" :current-page="searchModel.pageDto.pageNum"
          :page-sizes="searchModel.pageDto.pageSizes" :page-size="searchModel.pageDto.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="baseDto.page.total">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="结果日志" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <p v-html="logText"></p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Vue from 'vue'
import MyImportExportSearchBar from './my-import-export-search-bar'

export default {
  name: 'import-export-list',
  components: {
    MyImportExportSearchBar
  },
  data () {
    return {
      loading: true,
      searchModel: {
        pageDto: {
          pageSize: 10,
          pageNum: 1,
          pageSizes: [10, 20, 30, 100]
        },
        status: null
      },
      baseDto: {
        page: {
          total: 0
        }
      },
      dialogVisible: false,
      logText: '',
      checkedDataList: [] // 选择的数据集合
    }
  },
  created: function () {
    this.listPage()
  },
  methods: {
    handleSelectionChange: function (val) {
      this.checkedDataList = val
    },
    listPage: function () {
      this.loading = true
      Vue.$ajax({
        method: 'post',
        url: Vue.$adminServerURL + '/web/MyImportExportController/listPage',
        data: this.searchModel
      }).then(res => {
        this.loading = false
        if (res.data.flag === 'SUCCESS') {
          this.baseDto = res.data
        } else {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        }
      })
    },
    downloadExcel: function () {
      if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        })
        return
      }

      let data = this.checkedDataList[0]

      let xAuthToken = sessionStorage.getItem('x-auth-token')
      window.location.href = Vue.$adminServerURL + '/web/MyImportExportController/downloadFile?x-auth-token=' +
          xAuthToken + '&batchNo=' + data.batchNo
    },
    showLog: function () {
      if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        })
        return
      }

      let data = this.checkedDataList[0]

      this.logText = data.msg
      this.dialogVisible = true
    },
    pageSizeChange: function (e) {
      this.searchModel.pageDto.pageSize = e
      this.listPage()
    },
    pageIndexChange: function (e) {
      this.searchModel.pageDto.pageNum = e
      this.listPage()
    },
    search: function (p) {
      if (!p.isCollapse) { // 非高级查询，则只需要根据关键字查询
        this.searchModel.moduleName = p.searchKey
      } else {
        this.searchModel = p.searchModel
      }
      this.searchModel.pageDto.pageNum = 1
      this.listPage()
    },
    handleClose (done) {
      done()
    }
  }
}
</script>
